<template>
	<div class="Login">
		<Nav activeIndex="LoginView"></Nav>
		<section class="container content overflow">
			<el-switch style="display: block;width: 500px;text-align: center;margin: 50px auto;" v-model="switchBoolean"
				active-color="#0EBEFF" inactive-color="#0EBEFF" active-text="登录" inactive-text="注册"
				@change="changeEvent">
			</el-switch>
			<div class="con" v-if="switchBoolean">
				<h1>登录用户</h1>
				<div class="inputdiv">
					<label for="email">
						邮箱
					</label>
					<input type="email" placeholder="请输入邮箱" v-model="Login.email" :autocomplete="false">
				</div>
				<div class="inputdiv">
					<label for="password">
						密码
					</label>
					<input type="password" placeholder="请输入密码" v-model="Login.password" :autocomplete="false">
				</div>
				<button @click="dlEvent">登录</button>
			</div>
			<div class="con" v-else>
				<h1>注册用户</h1>
				<div class="inputdiv">
					<label for="username">
						用户名
					</label>
					<input type="text" placeholder="请输入用户名" v-model="register.username" :autocomplete="false">
				</div>
				<div class="inputdiv">
					<label for="password">
						密码
					</label>
					<input type="password" placeholder="请输入密码" v-model="register.password" :autocomplete="false">
				</div>
				<div class="inputdiv">
					<label for="email">
						邮箱
					</label>
					<input type="email" id="registeremail" placeholder="请输入邮箱" v-model="register.email"
						:autocomplete="false"><button @click="yzmEvent">发送验证码</button>
				</div>
				<div class="inputdiv">
					<label for="text">
						验证码
					</label>
					<input type="text" placeholder="请输入验证码" v-model="register.code" :autocomplete="false">
				</div>
				<button @click="zcEvent">提交</button>
			</div>
		</section>
		<Footer></Footer>
	</div>
</template>
<script>
	import Nav from '../components/Nav.vue'
	import Footer from '../components/Footer.vue'
	export default {
		name: 'LoginView',
		data() {
			return {
				switchBoolean: true,
				Login: {
					email: "983500351@qq.com",
					password: "xyxc0704"
				},
				register: {
					username: "",
					password: "",
					email: "",
					code: ""
				}
			}
		},
		components: {
			Nav,
			Footer
		},
		methods: {
			async yzmEvent() {
				let {
					data
				} = await this.$axios.post("/blog/users/emailsendCode", {
					email: this.register.email
				});
				//console.log(data);
			},
			async zcEvent() {
				let {
					data
				} = await this.$axios.post("/blog/users/registered", {
					username: this.register.username,
					password: this.$md5(this.register.password),
					email: this.register.email,
					code: this.register.code
				});
				// console.log(data);
				if (data.data == "注册成功") {
					// let userInfo = {
					// 	isLogin: true,
					// 	manage: true,
					// 	email: this.email
					// };
					// localStorage.setItem('userinfo', JSON.stringify(data.userinfo));
					Storage.prototype.setCanExpireLocal('userinfo', JSON.stringify(data.userinfo),
						30); //另外封装方法设置有效时间,30分钟之后过期
					this.$store.state.userinfo = data.userinfo;
					this.$router.push('/HomeView')
				}
			},
			async dlEvent() {
				let {
					data
				} = await this.$axios.post("/blog/users/signuser", {
					email: this.Login.email,
					password: this.$md5(this.Login.password)
				});
				// console.log(data);
				if (data.data == "用户登录成功") {
					// let userInfo = {
					// 	isLogin: true,
					// 	manage: true,
					// 	email: this.email
					// };
					// localStorage.setItem('userinfo', JSON.stringify(data.userinfo));
					Storage.prototype.setCanExpireLocal('userinfo', JSON.stringify(data.userinfo),
						30); //另外封装方法设置有效时间,30分钟之后过期
					this.$store.state.userinfo = data.userinfo;
					this.$router.push('/HomeView')
				}
			},
			changeEvent() {
				console.log(this.value2);
			}
		}
	}
</script>

<style lang="less" scoped>
	.Login {
		height: 100%;

		.container {
			max-width: 1200px;
			min-height: 827px;
			margin: 0 auto 10px;
		}

		.content {

			h2,
			h3 {
				font-size: 150%;
				margin: 20px 0;
			}

			p {
				color: #555;
				line-height: 30px;
				letter-spacing: 2px;
			}

			.con {
				width: 500px;
				height: 500px;
				background: #fff;
				padding: 30px;
				margin: 100px auto;

				h1 {
					text-align: center;
					font-size: 24px;
					line-height: 24px;
					font-weight: inherit;
				}

				.inputdiv {
					text-align: left;
					margin-top: 14px;
					margin-bottom: 14px;

					label {
						display: block;
					}

					input {
						width: 100%;
						height: 40px;
						padding: 8px;
						border-radius: 5px;
						border: 1px #ccc solid;
						margin-top: 10px;
						line-height: inherit;
					}

					#registeremail {
						width: 80%;
					}

					button {
						width: 20%;
						height: 40px;
						text-align: center;
						line-height: 40px;
						border-radius: 5px;
						border: 1px #ccc solid;
						background: #fff;
						margin-top: 10px;
					}

					button:hover {
						background-color: #0EBEFF;
						color: #fff;
					}
				}

				&>button {
					text-align: center;
					line-height: 30px;
					height: 30px;
					width: 80px;
					border: 1px #ccc solid;
					border-radius: 5px;
					background: #fff;
					margin: 30px auto;
					display: block;
				}

				&>button:hover {
					background-color: #0EBEFF;
					color: #fff;
				}
			}
		}
	}
</style>
